<template>
  <div class="login">
    <img src="/static/login/bg02.jpg" alt="" class="login_bg" />
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="rules"
      class="login_form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title" style="text-align:center;">登录</h3>
      </div>

      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
          prefix-icon="el-icon-user"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          show-password
          prefix-icon="el-icon-magic-stick"
          @keyup.enter.native="toLogin(loginForm)"
        />
      </el-form-item>

      <el-button
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="toLogin(loginForm)"
        >登录</el-button
      >
      <div class="form_bottom">
        <router-link to="/register"><span>没有账号？快去注册</span></router-link>
        <router-link to="/forgot"><span>忘记密码</span></router-link>
      </div>
    </el-form>
  </div>
</template>
<script>
import { isvalidUsername, isvalidPass } from '../../utils/validate'
export default {
  name: 'Login',
  data () {
    var validUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!isvalidUsername(value)) {
        callback(
          new Error(
            '用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符'
          )
        )
      } else {
        return true
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!isvalidPass(value)) {
        callback(new Error('密码以字母开头 长度在6~16之间 只能包含字母、数字'))
      } else {
        return true
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      passwordType: 'password',
      rules: {
        username: [
          { required: true, validator: validUsername, trigger: 'blur' }
        ],
        password: [{ required: true, validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  created () {
    console.log("sss")
    console.log(this.token)
  },
  methods: {
    // 登录
    toLogin (form) {
      if (isvalidUsername(form.username) && isvalidPass(form.password)) {
        console.log(form)
        form.username.trim()
        this.$axios.login(form).then(res => {
          // console.log(res)
          if (res.code == 20000) {
            this.cookies.setToken(res.data.token)
            this.$bus.$emit("isLogin",true)
            this.$router.push("/")
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.login {
  position: relative;
}
.login_bg {
  width: 100%;
}
.login_form {
  position: absolute;
  right: 10%;
  top: 20%;
  width: 300px;
  height: 300px;
  background-color: #ffffff96;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 40px;
  border-radius: 10px;
}
.form_bottom {
  display: flex;
  justify-content: space-between;
}
.form_bottom span {

  color: #409EFF;
}
</style>
